<template>
  <div class="affair">
    <el-form
      :inline="true"
      :model="formInline"
      class="form-inline"
    >
      <el-form-item label="日期">
        <el-input
          v-model="formInline.date"
          placeholder="日期"
        ></el-input>
      </el-form-item>
      <el-form-item label="事务">
        <el-input
          v-model="formInline.affair"
          placeholder="事务"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="记录员">
        <el-select
          v-model="formInline.recorder"
          placeholder="记录员"
        >
          <el-option
            v-for="item in options"
            :key="item.uid"
            :value="item.uname"
            :label="item.uname"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
        >添加</el-button>
      </el-form-item>
    </el-form>
    <el-input class="el-col-5" v-model="select" @keyup="selectByDate" style="margin-bottom:25px" placeholder="请输入需要查询的日期"></el-input>
    <div class="table">
      <el-table
      v-loading="loading"
        ref="singleTable"
        :data="db.data"
        highlight-current-row
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="50"
        >
        </el-table-column>
        <template
          v-for="(item,index) in db.hd"
          :key="index"
        >
          <el-table-column
            :property="item.field"
            :label="item.label"
            width="200"
          >
          </el-table-column>
        </template>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import handleDelete from "../utils/handleDele";
import addTableDate from "../utils/addTableData";

export default {
  data() {
    return {
      select: "",
      options: [],
      formInline: {
        affair: "",
        date: new Date().toLocaleString(),
        recorder: "",
      },
      loading: true,
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      currentRow: null,
      uname: "",
      db: {
        hd: [
          { field: "date", label: "日期" },
          { field: "affair", label: "事务" },
          { field: "recorder", label: "记录员" },
        ],
        data: [],
      },
      bf: []
    };
  },
  methods: {
    selectByDate() {
      if(this.select.trim() != '' ) {
        this.loading = true
        fetch(`/api/mysertSelectByDateServlet?date=${this.select}`)
        .then(res => res.json())
        .then(res => {
          this.db.data = res.data
          this.loading = false
        })
      }else {
        this.db.data = this.bf
      }
    },
    onSubmit() {
      addTableDate.call(
        this,
        this.formInline,
        "mysertAddServlet",
        this.getTableData.bind(this)
      );
      console.log("submit!");
    },
    handleEdit(index, row) {
      this.$confirm(
        `
        <label class="el-form-item__label">日期:</label>
        <input class="el-input__inner" id="date" value="${row.date}" placeholder="文件类型"/>
        <label class="el-form-item__label">事务:</label>
        <input class="el-input__inner" id="affair" value="${row.affair}" placeholder="事务"/>
        <label class="el-form-item__label">记录员:</label>
        <input class="el-input__inner" id="recorder" value="${row.recorder}" placeholder="记录员"/>
      `,
        "修改文件",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定",
          cancelButtonText: "放弃修改",
        }
      )
        .then(() => {
          let date = document.querySelector("#date").value;
          let affair = document.querySelector("#affair").value;
          let recorder = document.querySelector("#recorder").value;
          fetch("/api/mysertUpadateServlet", {
            method: "post",
            body: `id=${row.id}&date=${date}&affair=${affair}&recorder=${recorder}`,
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          })
            .then((res) => res.json())
            .then((res) => {
              if (res.status == "0") {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.getTableData.call(this);
              } else {
                this.$message.error("服务器繁忙，请稍后再试！");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已放弃修改",
          });
        });
    },
    handleDelete(index, row) {
      handleDelete.call(
        this,
        "mysertDeleteServlet",
        "id",
        row,
        this.getTableData.bind(this)
      );
    },
  },
  mounted() {
    fetch("/api//checkingSelectServlet", {
      method: "post",
    })
      .then((res) => res.json())
      .then((res) => {
        this.options = res.data;
      });
    // 获取办公室日常事务管理管理数据
    function getTableData() {
      fetch("/api/mysertSelectServlet")
        .then((res) => res.json())
        .then((res) => {
          this.db.data = res.data;
          this.bf = this.db.data
        });
    }
    this.loading = false
    this.getTableData = getTableData;
    getTableData.call(this);
  },
};
</script>

<style scoped>
.table {
  text-align: center;
}
</style>